<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="merchantId">
        <merchantSelect v-model="list.filter.merchantId" />
      </el-form-item>
      <el-form-item prop="subMchId">
        <SubMchSelect v-model="list.filter.subMchId" />
      </el-form-item>
      <el-form-item prop="placeCode">
        <AllRegionSelect
          v-model="list.filter.placeCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <AuthButton @click="add" name="新增" />
        <ExportExcel
          url="/sot-admin-api/merchant/merchant/downloadMerchantList"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="店铺ID" prop="subMchId"></el-table-column>
      <el-table-column label="商户名称" prop="parentMchName"></el-table-column>
      <el-table-column label="店铺名称" prop="name"></el-table-column>
      <el-table-column label="所属地区" prop="placeName"></el-table-column>
      <el-table-column label="店铺客服电话" prop="phone">
        <template slot-scope="scope">
          <span v-if="scope.row.phone">{{ scope.row.phone.join("， ") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺联系人" prop="contracts"></el-table-column>
      <el-table-column
        label="店铺联系人手机号"
        prop="contactPhone"
      ></el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { subMchId, businessStatus } }">
          <KiPopSwitch
            v-bind="popSwitchProps(businessStatus)"
            @change="changeStatus(subMchId, businessStatus)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="view(row)" name="查看" />
          <auth-button @click="edit(row)" name="编辑" />
          <auth-button @click="d({ subMchId: row.subMchId })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <addPage ref="addPage" @save="getList"></addPage>
  </div>
</template>

<script>
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";
import { getUserInfo } from "@/utils/auth.js";
import Expired from "@/components/Expired";
import merchantSelect from "@/components/merchantSelect";
import SubMchSelect from "@/components/SubMchSelect";
import addPage from "./_add";

export default {
  mixins: [pageMixin],
  components: { Expired, addPage, merchantSelect, SubMchSelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "/sot-admin-api/merchant/sub/",
      axiosConfig: {
        getList: {
          url: "querySubMerchantList",
        },
        r: {
          url: "selectOne",
        },
        updateStatus: {
          url: "changeStatus",
        },
      },
    }),
  data() {
    return {
      roles: [],
      options: [],
      isAdmin: getUserInfo().isAdmin,
    };
  },
  methods: {
    changeStatus(subMchId, businessStatus) {
      console.log("subMchId", subMchId);
      console.log("businessStatus", businessStatus);
      console.log("changeStatus");

      if (businessStatus == 1) {
        this.$confirm(
          "停用店铺会同时将店铺下所有商品停用，清谨慎选择",
          "停用店铺提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.updateStatus({
            subMchId: subMchId,
            status: businessStatus ^ 1,
          });
        });
      } else {
        this.updateStatus({
          subMchId: subMchId,
          status: businessStatus ^ 1,
        });
      }
    },
    add() {
      this.$refs.addPage.open({
        title: "新增店铺",
        type: "add",
      });
    },
    edit(row) {
      this.$POST("/sot-admin-api/merchant/sub/selectOne", {
        subMchId: row.subMchId,
      }).then(({ data }) => {
        this.$refs.addPage.open({
          title: "编辑店铺",
          type: "edit",
          data,
        });
      });
    },

    view(row) {
      this.$POST("/sot-admin-api/merchant/sub/selectOne", {
        subMchId: row.subMchId,
      }).then(({ data }) => {
        this.$refs.addPage.open({
          title: "查看店铺",
          type: "view",
          data,
        });
      });
    },
  },
};
</script>
